<template>
  <div class="loginbox">
    <!-- 背景 -->
    <img src="@/images/indexbj.png" alt="" class="loginbj" />
    <!-- logo -->
    <img src="@/images/loginicon.png" alt="" class="loginicon" />
    <!-- 标题 -->
    <img src="@/images/logintitle.png" alt="" class="logintitle" />
    <!-- 人头 -->
    <img src="@/images/loginre.png" alt="" class="loginren" />

    <!-- 右上角语音控制模块 -->
    <HeadMain :leftshow="leftshow" />

    <!-- 左侧sidbox -->
    <div class="taskbox">
      <div class="taskitembox tool" @click="sideId = 1">
        <img
          src="@/images/taskitem.png"
          alt=""
          class="normal taskicon"
          v-if="sideId != 1"
        />
        <img
          src="@/images/taskitemac.png"
          alt=""
          class="active taskicon"
          v-if="sideId != 1"
        />
        <img
          src="@/images/taskitemac.png"
          alt=""
          class="taskicon"
          v-if="sideId == 1"
        />
        <div class="taskitemtext">鼻咽癌临床肿瘤学</div>
      </div>
      <div class="taskitembox tool" @click="sideId = 2">
        <img
          src="@/images/taskitem2.png"
          alt=""
          class="normal taskicon2"
          v-if="sideId != 2"
        />
        <img
          src="@/images/taskitem2ac.png"
          alt=""
          class="active taskicon2"
          v-if="sideId != 2"
        />
        <img
          src="@/images/taskitem2ac.png"
          alt=""
          class="taskicon2"
          v-if="sideId == 2"
        />
        <div class="taskitemtext">断层解剖</div>
      </div>
    </div>
    <!-- 图片展示 -->
    <div class="mxbox" v-if="sideId == 1 && mainid == 1" :key="mainid">
      <img src="@/images/gaishu.png" alt="" class="mxboxbj" />
    </div>

    <div class="mxbox" v-if="sideId == 1 && mainid == 2" :key="mainid">
      <div v-for="item in mainimgdata" :key="item.id" v-if="item.id == imgid">
        <img :src="item.src" alt="" class="mxboxbj" />
        <div class="mxboxtitle">{{ item.des }}</div>
      </div>
      <div class="tool tleftbox" v-if="imgid != 1" @click="imgid = imgid - 1">
        <img src="@/images/tleft.png" alt="" class="normal" />
        <img src="@/images/tleftac.png" alt="" class="active" />
      </div>
      <div
        class="tool trightbox"
        v-if="mainimgdata.length > imgid"
        @click="imgid = imgid + 1"
      >
        <img src="@/images/trght.png" alt="" class="normal" />
        <img src="@/images/trghtac.png" alt="" class="active" />
      </div>
    </div>
    <div class="mxbox" v-if="sideId == 1 && mainid == 3" :key="mainid">
      <img src="@/images/mxboxbj.png" alt="" class="mxboxbj" />
      <img
        :src="item.src"
        alt=""
        class="mxboximg"
        v-for="item in mainimgdatafx"
        :key="item.id"
        v-if="item.id == imgid"
      />
      <div class="tool tleftbox" v-if="imgid != 1" @click="imgid = imgid - 1">
        <img src="@/images/tleft.png" alt="" class="normal" />
        <img src="@/images/tleftac.png" alt="" class="active" />
      </div>
      <div
        class="tool trightbox"
        v-if="mainimgdatafx.length > imgid"
        @click="imgid = imgid + 1"
      >
        <img src="@/images/trght.png" alt="" class="normal" />
        <img src="@/images/trghtac.png" alt="" class="active" />
      </div>
    </div>
    <div class="mxbox" v-if="sideId == 1 && mainid == 4" :key="mainid">
      <!-- 背景图 -->
      <img src="@/images/mxboxbj.png" alt="" class="mxboxbj" />
      <!-- 图 -->
      <img src="@/images/tm.png" alt="" class="tmd" />
      <!-- 圆1 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy" @click="bjshow = 1" />
      <img
        src="@/images/y1.png"
        alt=""
        class="y1img"
        v-if="bjshow == 1"
        :key="bjshow"
      />
      <!-- 圆2 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy tmy2" @click="bjshow = 2" />
      <img
        src="@/images/y2.png"
        alt=""
        class="y2img"
        v-if="bjshow == 2"
        :key="bjshow"
      />
      <!-- 圆3 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy tmy3" @click="bjshow = 3" />
      <img
        src="@/images/y3.png"
        alt=""
        class="y3img"
        v-if="bjshow == 3"
        :key="bjshow"
      />
      <!-- 圆4 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy tmy4" @click="bjshow = 4" />
      <img
        src="@/images/y4.png"
        alt=""
        class="y4img"
        v-if="bjshow == 4"
        :key="bjshow"
      />
      <!-- 圆5 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy tmy5" @click="bjshow = 5" />
      <img
        src="@/images/y5.png"
        alt=""
        class="y5img"
        v-if="bjshow == 5"
        :key="bjshow"
      />
      <!-- 圆6 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy tmy6" @click="bjshow = 6" />
      <img
        src="@/images/y6.png"
        alt=""
        class="y6img"
        v-if="bjshow == 6"
        :key="bjshow"
      />
      <!-- 圆7 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy tmy7" @click="bjshow = 7" />
      <img
        src="@/images/y7.png"
        alt=""
        class="y7img"
        v-if="bjshow == 7"
        :key="bjshow"
      />
      <!-- 圆7 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy tmy8" @click="bjshow = 8" />
      <img
        src="@/images/y8.png"
        alt=""
        class="y8img"
        v-if="bjshow == 8"
        :key="bjshow"
      />
      <!-- 圆7 上 - 左 -->
      <img src="@/images/tmy.png" alt="" class="tmy tmy9" @click="bjshow = 9" />
      <img
        src="@/images/y9.png"
        alt=""
        class="y9img"
        v-if="bjshow == 9"
        :key="bjshow"
      />
    </div>
    <div class="mxbox" v-if="sideId == 1 && mainid == 5" :key="mainid">
      <img src="@/images/mxboxbj.png" alt="" class="mxboxbj" />
      <!-- 图 -->
      <img src="@/images/zztz.png" alt="" class="zztz" />
    </div>
    <div class="mxbox" v-if="sideId == 1 && mainid == 6" :key="mainid">
      <img src="@/images/mxboxbj.png" alt="" class="mxboxbj" />
      <!-- 图 -->
      <img src="@/images/fqzz.png" alt="" class="zztzs" />
    </div>
    <div class="mxbox" v-if="sideId == 1 && mainid == 7" :key="mainid">
      <div v-for="item in mainimgdatazh" :key="item.id" v-if="item.id == imgid">
        <img :src="item.src" alt="" class="mxboxbj" />
      </div>
      <div class="tool tleftbox" v-if="imgid != 1" @click="imgid = imgid - 1">
        <img src="@/images/tleft.png" alt="" class="normal" />
        <img src="@/images/tleftac.png" alt="" class="active" />
      </div>
      <div
        class="tool trightbox"
        v-if="mainimgdatazh.length > imgid"
        @click="imgid = imgid + 1"
      >
        <img src="@/images/trght.png" alt="" class="normal" />
        <img src="@/images/trghtac.png" alt="" class="active" />
      </div>
    </div>
    <!--  -->
    <!-- 右侧task对应box -->
    <div class="mainbox" v-if="sideId == 1">
      <!-- 任务id -->
      <div class="maintaskbox">
        <div
          class="maintaskitem"
          v-for="item in maindata"
          :key="item.id"
          @click="mainidgo(item.id)"
          :class="item.id == mainid ? ' maintaskitemactive' : ''"
        >
          <img
            src="@/images/tab2.png"
            alt=""
            class="normal tab2img"
            v-if="mainid != item.id"
          />
          <!-- <img
            src="@/images/tab1.png"
            alt=""
            class="active tab1img"
            v-if="mainid != item.id"
          /> -->
          <img
            src="@/images/tab1.png"
            alt=""
            class="tab1img"
            v-if="mainid == item.id"
          />
          <div
            class="maintasktext"
            :class="item.id == mainid ? 'maintasktextactive' : ''"
            >{{ item.name }}</div
          >
        </div>
      </div>
      <!-- 第二 -->
      <div class="divscroll divscrolls" v-if="mainid == 1">
        <p>
          鼻咽癌(nasopharyngeal
          carcinoma,NPC)是指原发于鼻咽黏膜上皮组织的恶性肿瘤,其病因目前尚未完全明确,流行病学调査提示主要与
          EB 病毒(Epstein-Banr
          virus,EBV)感染、遗传因素和环境因素有关。早期鼻咽癌的治疗首选放射治疗,局部晚期鼻咽癌则常采用以放射治疗为主，辅以化学治疗、分子靶向药物治疗的综合治疗模式。</p
        >
        <p>
          鼻咽近似于一个立方体,其前界为后鼻孔，上界为蝶骨体,后界为斜坡和第1、2颈椎,下界为软腭。大小约
          4cm(横径)x2cm(前后径)x4cm(垂直径)。鼻咽顶壁向后下倾斜与鼻咽后壁相延续，侧壁和后壁由咽筋膜组成,咽筋膜自枕骨大孔前缘咽结节处起始，向外沿颞骨岩尖下表面向两侧延伸达颈动脉管内侧,向前终止于翼内板的后缘；咽鼓管开口于侧壁,其后部为软骨,并突入鼻咽在咽鼓管圆枕后方形成峭状突起，称为咽鼓管隆凸。咽鼓管隆凸与鼻咽顶后壁之间,形成深约
          1cm 的隐窝,称为咽隐窝,是鼻咽癌的好发部位,其上距破裂孔仅
          1cm,故鼻咽癌常可沿此孔浸润扩展。
        </p>
      </div>
      <div class="divscroll divscrolls" v-if="mainid == 2">
        <p>
          全球每年超过 13
          万例鼻咽癌新发病例和8万例因鼻咽癌死亡病例,2014年中国鼻咽癌发病率为
          3.26/10 万,新发病例估计为 4.46万例,其中男性约 3.16万例,女性约 1.30
          万例,占全部恶性肿瘤发病的 1.17%,死亡病例
          2.42万例。男性鼻咽癌的发病率是女性的 2~3 倍,对于高风险人群,发病高峰在
          50-59
          岁。鼻咽癌的发病率存在明显的地域差异:在美国和西欧罕见,在中国南部则较为常见,发病率可能达到每年
          25/10
          万；中等风险区域包括东南亚、北非和中东,以及北极地区。从高风险地区迁移至低风险地区的人群仍具有较高的发病风险,但经历连续数代后通常会有所降低。鼻咽癌发病率的地理分布差异表明了其病因为多因素,由若干因素相互作用所致:EB
          病毒感染、环境因素(如大量摄人腌制食物和吸烟),以及遗传易感性。在美国和欧洲,鼻咽癌更常与饮酒和吸烟有关,这两者也是其他头颈部肿瘤的典型危险因素。</p
        >
      </div>
      <div class="divscroll divscrolls" v-if="mainid == 3">
        <p>
          鼻咽癌的病理组织分型目前仍没有统一的标准。2005年,世界卫生组织(WHO)将鼻癌的病理类型分为三型:非角化型癌(non-keratinizing
          carcinoma)、角化型鳞状细胞癌(keratinizingsquamous cell
          carcinoma)和基底细胞样鳞状细胞癌(basaloid squamous cell
          carcinoma)。临床最常见的是非角化型癌,其中非角化型癌又分为分化型和未分化型两个亚型。</p
        >
      </div>
      <div class="divscroll divscrolls" v-if="mainid == 4">
        <p>
          （1）局部扩散:鼻咽癌有浸润性生长的特点,容易沿黏膜下蔓延。其蔓延方向分别为:
          ①向下:沿咽后壁或咽侧壁侵犯到口咽、下咽。
          ②向上:直接侵入蝶窦、垂体和视神经;或由破裂孔、卵圆孔入颅。
          ③向外:侵犯咽旁间隙、颞下窝。 ④向前:侵犯鼻腔后部、筛窦。
          ⑤向后:穿过鼻咽后壁,可侵犯上段颈椎。
        </p>
        <p>
          （2）淋巴结蔓延:鼻咽腔淋巴引流十分丰富,在黏膜下有较致密的淋巴管网。
          鼻咽癌以淋巴转移率高、转移出现早、转移范围广为特点40~80%的鼻咽癌患者初诊时即临床发现颈部淋巴结肿大。鼻咽癌通常沿着淋巴管引流方向依次转移,较少出现跳跃现象,咽后间隙及颈部Ⅱ区为好发部位。
        </p>
        <p>
          （3）血行转移:鼻咽癌容易发生血行转移,其转移率为
          20%~30%。最常见的转移部位为肝、骨和肺,骨转移中又以脊椎转移、骨盆转移多见。转移多发生在放射治疗后3年内。
        </p>
      </div>
      <div class="divscroll divscrolls" v-if="mainid == 5">
        <p>
          （1）临床症状
          ①鼻出血及回缩性血涕:18%～30%的鼻咽癌患者以回缩性血涕为首发症状,表现为晨起时发现回吸至口腔中的鼻腔分泌物中带血丝。鼻部肿块伴有大块坏死、深大溃疡时可出现大出血。
          ②耳鸣或听力减退:肿瘤位于咽鼓管咽口、隆突附近者,易引起咽鼓管通气和内耳淋巴液循环障碍,从而导致耳闷、耳鸣或听力减退症状,这是鼻咽癌早期症状之一,占初发症状的17%-30%。
          ③鼻塞:鼻咽肿瘤位于鼻咽顶前壁或侵犯后鼻孔时,导致鼻腔通气不畅,开始为一侧,严重时两侧均有。
          ④头痛:常表现为枕部或颞部的疼痛,多为钝痛。肿瘤合并感染、肿瘤侵犯颅底骨、脑神经或颅内组织、颈部淋巴结转移压迫血管神经等均可致头痛。
          ⑤面部麻木:鼻咽肿瘤压迫或侵犯三叉神经第1、第2、第3支时,可表现为患侧头面部皮肤浅感觉异常或麻木。
          ⑥复视:为鼻咽肿瘤侵及颅底、海绵窦而引起的第Ⅲ、第Ⅳ、第Ⅵ对脑神经受累或肿瘤侵人眼眶内所致,临床表现视物时出现双重影。
          ⑦张口困难:晚期症状之一,提示肿瘤侵犯颞下窝、翼内肌、翼外肌、翼腭窝等。
        </p>
        <p>
          （2）体征
          ①鼻咽肿物:通过间接鼻咽镜或纤维鼻咽镜可见鼻咽部隆起的肿物。对于黏膜下型鼻咽癌,可能未发现鼻咽腔新生物,但可见鼻咽腔结构不对称。
          ②颈部淋巴结肿大:40%~80%
          的鼻咽癌患者以无痛性颈部淋巴结肿大为首发症状。多数病例开始为一侧,继而发展为双侧,质地较硬,活动度差。
          ③脑神经受侵所致体征:鼻咽癌侵犯颅底,可因侵犯脑神经而引起一系列症状和体征,如眼球活动障碍、头痛、视力下降、上睑下垂、瞳孔缩小、吞咽困难和咽反射减弱或消失。
        </p>
      </div>
      <div class="divscroll divscrolls" v-if="mainid == 6">
        <p>
          早期发现、早期诊断对提高鼻咽癌的疗效十分重要。影响早期诊断的主要原因是鼻咽肿瘤生长部位隐蔽,早期症状无特殊性,容易被漏诊和误诊。因此,在临床工作中必须认真询问病史和仔细体检,关注咽痛患者的主要症状及体征。目前,鼻咽局部活组织检查是唯一确诊手段，EB
          病毒血清学检査、间接或纤维鼻咽镜检査及鼻咽影像学检查等均被视为有效的辅助诊断措施。美国癌症联合委员会(The
          American Joint Committee on Cancer,AJCC)第八版分期系统,将鼻咽癌按 TNM
          状态分为0至Ⅳ期,其中第Ⅳ期再细分为ⅣA 和ⅣB。
        </p>
      </div>
      <div class="divscroll divscrolls" v-if="mainid == 7">
        <p>
          综合治疗原则:鼻咽癌治疗应以个体化的分层治疗为原则。I期、Ⅱ期鼻咽癌以单纯根治性放射治疗为主;亚期、Ⅳ期患者应采用放、化疗综合治疗;对于已有远处转移的患者应采用以化学治疗为主的姑息性化、放疗综合治疗;根治性放疗后残存或复发病例在符合手术治疗条件时可酌情考虑手术挽救。就放射治疗的具体方式而言,目前临床主要应用调强放疗技术。生物治疗、分子靶向药物治疗、免疫治疗等新型治疗方法在鼻咽癌中的应用还需要深入研究。
        </p>
        <p>
          放射治疗原则:①首程放射治疗患者应以体外照射为主,必要时辅以腔内近距离放射治疗,不能单纯行腔内照射。②放射源首选
          4-6MV的X线。③放射治疗靶区应包括肿瘤侵犯范围亚临床区域及颈部淋巴引流区。④尽可能采用多野照射技术或调强放疗技术保护周围正常组织器官。⑤遵循个体化的分层治疗原则。放疗前根据患者个体情况制订放疗计划,治疗中根据局部肿瘤退缩或患者体型轮廓变化等情况及时修改放疗计划。
        </p>
      </div>
    </div>
    <!-- 左侧logo菜单 -->
    <div class="showbox">
      <!-- 展开式 -->
      <img
        src="@/images/show.png"
        alt=""
        class="showlogo"
        @click="showbox = true"
      />
      <!-- 展开背景盒子 -->
      <div class="showbjbox" v-show="showbox">
        <img src="@/images/showbj.png" alt="" class="showbj" />
        <div
          :class="`showbjtext${item.id}`"
          v-for="item in showdata"
          :key="item.id"
          @click="goshow(item.id)"
        >
          {{ item.name }}
          <div class="up-triangle" v-if="showboxid == item.id"></div>
        </div>
        <!-- <div class="showbjtext">
          知识点回顾
          <div class="up-triangle"></div>
        </div>
        <div class="showbjtext2">
          实验场景认知
          <div class="up-triangle"></div>
        </div>
        <div class="showbjtext3">
          模拟操作
          <div class="up-triangle"></div>
        </div> -->
        <!-- i关闭 -->
        <img
          src="@/images/showfalse.png"
          alt=""
          class="showfalseimg"
          @click="ysclose"
        />
      </div>

      <img src="@/images/idnexlogo.png" alt="" class="idnexlogo" />
    </div>
    <!-- 解刨定制2V -->
    <div class="altasbox" v-if="sideId == 2">
      <ATlas />
    </div>
    <!-- 下一步 -->
    <div class="tool nextbox" v-if="sideId == 1" @click="sideId = 2">
      <img src="@/images/next.png" alt="" class="normal" />
      <img src="@/images/nextac.png" alt="" class="active" />
    </div>
    <!-- 后处理图像 -->
    <div
      class="hclbox"
      v-if="dcmbs != ''"
      :style="{
        left: hclboxPos.x + '%',
        top: hclboxPos.y + '%',
        transform: 'translate(-50%, -50%)',
        cursor: hclboxDragging ? 'move' : 'default',
      }"
    >
      <!-- 标题部分 -->
      <div class="hcltop" @mousedown.stop="hcltopMouseDown">
        <img src="@/images/txcltop.png" alt="" class="bjimg" />
        <!-- 左侧标题名字部分 -->
        <div class="hcltitle"> 鼻咽癌影像学表现-{{ dcmbs }}</div>
        <img
          src="@/images/tipsclose.png"
          alt=""
          class="hcltopclose"
          @click="dcmbs = ''"
        />
      </div>
      <!-- 主题内容部分 -->
      <div class="hclmain"
        ><Dcoms ref="dcomcl" :fileNames="fileNames" :baseUrl="baseUrl"
      /></div>
    </div>

    <!-- 底部footmain -->
    <div class="footmainbox" v-if="sideId == 2">
      <div class="foottaskbox">
        <div class="footitem tool" @click="dcmbsfn('CT')">
          <img
            src="@/images/footitembj.png"
            alt=""
            class="normal"
            v-if="dcmbs != 'CT'"
          />
          <img
            src="@/images/footitembjac.png"
            alt=""
            class="active"
            v-if="dcmbs != 'CT'"
          />
          <img src="@/images/footitembjac.png" alt="" v-if="dcmbs == 'CT'" />
          <div class="footitename">CT</div>
        </div>
        <div class="footitem tool" @click="dcmbsfn('MRI')">
          <img
            src="@/images/footitembj.png"
            alt=""
            class="normal"
            v-if="dcmbs != 'MRI'"
          />
          <img
            src="@/images/footitembjac.png"
            alt=""
            class="active"
            v-if="dcmbs != 'MRI'"
          />
          <img src="@/images/footitembjac.png" alt="" v-if="dcmbs == 'MRI'" />
          <div class="footitename">MRI</div>
        </div>
        <div class="footitem tool" @click="dcmbsfn('PET')">
          <img
            src="@/images/footitembj.png"
            alt=""
            class="normal"
            v-if="dcmbs != 'PET'"
          />
          <img
            src="@/images/footitembjac.png"
            alt=""
            class="active"
            v-if="dcmbs != 'PET'"
          />
          <img src="@/images/footitembjac.png" alt="" v-if="dcmbs == 'PET'" />
          <div class="footitename">PET/CT</div>
        </div>
      </div>
      <img src="@/images/footbj.png" alt="" class="footbjimg" />
      <div class="footname">鼻咽癌影像学表现</div>
    </div>
  </div>
</template>

<script>
  import ATlas from '@/components/aTlas.vue';
  import HeadMain from '@/components/headMain.vue';
  import Dcoms from './dcoms.vue';
  import { dcomdata } from '@/mixin/dcom';
  export default {
    mixins: [dcomdata],
    name: 'WorkspaceJsonLoaDing',
    components: {
      HeadMain,
      ATlas,
      Dcoms,
    },
    data() {
      return {
        bjshow: 0,
        leftshow: true,
        dcmbs: '',
        sideId: 1,
        baseUrl: '',
        fileNames: [],
        imgid: 1,
        isLoading: false,
        hclboxPos: { x: 50, y: 50 },
        hclboxDragging: false,
        hclboxStartPos: { x: 0, y: 0 },
        mouseStartPos: { x: 0, y: 0 },
        maindata: [
          {
            id: 1,
            name: '概述',
          },
          {
            id: 2,
            name: '流行病学',
          },
          {
            id: 3,
            name: '病理分型',
          },
          {
            id: 4,
            name: '自然病程',
          },
          {
            id: 5,
            name: '症状和体征',
          },
          {
            id: 6,
            name: '诊断和分期',
          },
          {
            id: 7,
            name: '治疗原则',
          },
        ],
        mainid: 4,
        mainimgdata: [
          {
            id: 1,
            src: require('@/images/m21.png'),
            des: '1994–2019年中国不同年龄组人群鼻咽癌死亡率流行趋势',
          },
          {
            id: 2,
            src: require('@/images/m22.png'),
            des: '1994–2019年中国男性和女性鼻咽癌死亡率流行趋势',
          },
          {
            id: 3,
            src: require('@/images/m23.png'),
            des: '鼻咽癌发病趋势',
          },
          {
            id: 4,
            src: require('@/images/m24.png'),
            des: '鼻咽癌死亡趋势',
          },
        ],
        showboxid: 1,
        showdata: [
          {
            id: 1,
            name: '知识点回顾',
          },
          {
            id: 2,
            name: '实验场景认知',
          },
          {
            id: 3,
            name: '模拟操作',
          },
        ],
        mainimgdatafx: [
          {
            id: 1,
            src: require('@/images/m31.jpg'),
          },
          {
            id: 2,
            src: require('@/images/m32.jpg'),
          },
          {
            id: 3,
            src: require('@/images/m33.jpg'),
          },
          {
            id: 4,
            src: require('@/images/m34.jpg'),
          },
          {
            id: 5,
            src: require('@/images/m35.jpg'),
          },
        ],
        mainimgdatazh: [
          {
            id: 1,
            src: require('@/images/71.png'),
          },
          {
            id: 2,
            src: require('@/images/72.png'),
          },
          {
            id: 3,
            src: require('@/images/d1.gif'),
          },
          {
            id: 4,
            src: require('@/images/d2.gif'),
          },
        ],
        showbox: false,
      };
    },

    mounted() {},

    methods: {
      mainidgo(id) {
        this.$nextTick(() => {
          this.mainid = id;
        });
      },
      goshow(id) {
        this.showboxid = id;
      },
      dcmbsfn(id) {
        if (this.isLoading && this.$refs.dcomcl) {
          this.$refs.dcomcl.cancelLoading?.();
        }

        this.isLoading = true;

        if (id == 'CT') {
          this.baseUrl =
            'https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/dcom/CT/';
          this.fileNames = this.CTdcom;
          this.dcmbs = id;

          this.$nextTick(() => {
            if (this.$refs.dcomcl) {
              this.$refs.dcomcl.loadUrlBtn().finally(() => {
                this.isLoading = false;
              });
            }
          });
        }
        if (id == 'MRI') {
          this.baseUrl =
            'https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/dcom/MRI/';
          this.fileNames = this.MRIdcom;
          this.dcmbs = id;

          this.$nextTick(() => {
            if (this.$refs.dcomcl) {
              this.$refs.dcomcl.loadUrlBtn().finally(() => {
                this.isLoading = false;
              });
            }
          });
        }
        if (id == 'PET') {
          this.baseUrl =
            'https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/dcom/PET/';
          this.fileNames = this.PETdcom;
          this.dcmbs = id;

          this.$nextTick(() => {
            if (this.$refs.dcomcl) {
              this.$refs.dcomcl.loadUrlBtn().finally(() => {
                this.isLoading = false;
              });
            }
          });
        }
      },
      ysclose() {
        this.showbox = false;
      },
      hclboxMouseDown(event) {
        this.hclboxDragging = true;
        this.mouseStartPos = {
          x: event.clientX,
          y: event.clientY,
        };
        this.hclboxStartPos = {
          x: this.hclboxPos.x,
          y: this.hclboxPos.y,
        };

        document.addEventListener('mousemove', this.hclboxMouseMove);
        document.addEventListener('mouseup', this.hclboxMouseUp);
      },
      hclboxMouseMove(event) {
        if (!this.hclboxDragging) return;

        const deltaX = event.clientX - this.mouseStartPos.x;
        const deltaY = event.clientY - this.mouseStartPos.y;

        // 计算相对于视窗的百分比
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;

        const deltaXPercent = (deltaX / windowWidth) * 100;
        const deltaYPercent = (deltaY / windowHeight) * 100;

        this.hclboxPos = {
          x: Math.max(0, Math.min(100, this.hclboxStartPos.x + deltaXPercent)),
          y: Math.max(0, Math.min(100, this.hclboxStartPos.y + deltaYPercent)),
        };
      },
      hclboxMouseUp() {
        this.hclboxDragging = false;

        document.removeEventListener('mousemove', this.hclboxMouseMove);
        document.removeEventListener('mouseup', this.hclboxMouseUp);
      },
      hcltopMouseDown(event) {
        event.stopPropagation();
        this.hclboxMouseDown(event);
      },
    },
  };
</script>

<style scoped>
  .loginbox {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .loginbj {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .idnexlogo {
    width: 88px;
    height: 100px;
    position: relative;
  }
  .taskbox {
    position: absolute;
    left: 23px;
    top: 237px;
    display: flex;
    flex-direction: column;
    z-index: 999999;
  }
  .taskitembox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
  }
  .taskitemtext {
    font-weight: bold;
    font-size: 22px;
    color: #333333;
    position: absolute;
    width: 68px;

    display: flex;
    /* 关键属性 */
    writing-mode: vertical-rl; /* 从右向左垂直排列 */
    text-orientation: mixed; /* 中文保持正立，英文数字可能旋转 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    flex-direction: column; /* 可选：若需垂直排列文字（竖排） */
    cursor: pointer;
    letter-spacing: 2px;
  }
  .taskicon {
    width: 68px;
    height: 222px;
  }
  .taskicon2 {
    width: 68px;
    height: 152px;
  }
  .mxbox {
    position: absolute;
    left: 124px;
    top: 105px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .bjimg {
    width: 100%;
    height: auto;
    position: absolute;
  }
  .mxboxbj {
    /* width: 950px;
     height: 790px;*/
    width: 855px;
    height: 710px;
  }
  .mxboximg {
    width: 578px;
    height: 433px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .zztz {
    width: 778px;
    height: 633px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .zztzs {
    width: 728px;
    height: 633px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nextbox {
    position: absolute;
    bottom: 30px;
    right: 160px;
  }
  .nextbox img {
    width: 180px;
    height: 60px;
  }
  .mainbox {
    width: 750px;
    height: 700px;
    position: absolute;
    right: 110px;
    top: 105px;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }
  .maintaskbox {
    width: 100%;
    display: flex;
  }
  .maintaskitem {
    position: relative;
    margin: 0px -7px;
    width: 106px;
    cursor: pointer;
  }
  .maintaskbox::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -13px;
    width: 95.5%;
    height: 2px; /* 水平线高度 */
    background-color: #333; /* 水平线颜色 */
    z-index: 9;
  }
  /* .maintaskitem:hover {
    margin: 0px -5px;
    width: 151px;
    font-weight: bold !important;
    font-size: 21px !important;
    color: #ffffff !important;
  } */
  .maintaskitemactive {
    margin: 0px -5px;
    width: 151px;
  }
  .tab1img {
    width: 151px;
    height: 41px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .tab2img {
    width: 101px;
    height: 33px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .maintasktext {
    font-weight: 600;
    font-size: 14px;
    color: #40495a;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 101px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    z-index: 999;
  }
  /* .maintasktext:hover {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 151px;
    height: 41px;
    line-height: 41px;
    font-weight: bold !important;
    font-size: 21px !important;
    color: #ffffff !important;
  } */
  .maintasktextactive {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-weight: bold;
    font-size: 21px;
    color: #ffffff;
    width: 151px;
    height: 41px;
    line-height: 41px;
  }
  .divscrolls {
    width: 92.5%;
    height: 605px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 21px;
    color: #40495a;
    line-height: 48px;
    text-indent: 42px;
    padding-left: 0px;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-top: 33px;
  }

  /* 为所有段落添加底部间距，最后一个段落除外 */
  .divscrolls p:not(:first-child) {
    margin-top: -13px !important;
  }
  .showbox {
    position: absolute;
    left: 13px;
    top: 125px;
    z-index: 99999;
  }
  .showlogo {
    width: 22px;
    height: 44px;
    position: absolute;
    left: 85px;
    top: 28px;

    cursor: pointer;
  }
  .showbjbox {
    position: absolute;
    top: 4px;
    left: 40px;
    cursor: pointer;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .showbj {
    width: 408px;
    height: 100px;
  }
  .showbjtext1 {
    font-weight: 400;
    font-size: 16px;
    color: #a5b6cf;
    text-align: center;
    width: 50px;
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translate(0, -60%);
  }
  .showbjtext2 {
    font-weight: 400;
    font-size: 16px;
    color: #a5b6cf;
    text-align: center;
    width: 65px;
    position: absolute;
    left: 190px;
    top: 50%;
    transform: translate(0, -60%);
  }
  .showbjtext3 {
    font-weight: 400;
    font-size: 16px;
    color: #a5b6cf;
    text-align: center;
    width: 65px;
    height: 52px;
    line-height: 52px;
    position: absolute;
    left: 300px;
    top: 50%;
    transform: translate(0, -60%);
  }

  .up-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid #29fdfd; /* 三角形颜色 */
    position: absolute;
    left: 28%;
  }
  .showfalseimg {
    width: 22px;
    height: 44px;
    position: absolute;
    top: 25px;
    right: -13px;
    cursor: pointer;
  }
  .altasbox {
    width: 1720px;
    height: 720px;
    overflow: hidden;
    position: absolute;
    left: 150px;
    top: 97px;
  }
  .footmainbox {
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
  .footbjimg {
    width: 569px;
    height: 100px;
  }
  .footname {
    font-weight: bold;
    font-size: 21px;
    color: #40495a;
    position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translate(-50%, 0);
    letter-spacing: 4px;
  }
  .foottaskbox {
    position: absolute;
    height: 44px;
    width: 475px;
    top: 13px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: space-around;
  }
  .footitem {
    position: relative;
    cursor: pointer;
  }
  .footitename {
    font-weight: bold;
    font-size: 21px;
    color: #40495a;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
  }
  .hclbox {
    position: absolute;
    width: auto;
    height: 701px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 999;
  }
  .hcltop {
    width: 950px;
    height: 41px;

    position: relative;
    display: flex;
  }
  .hclmain {
    width: 947px;
    height: 660px;
    border: 1px solid;
    border-image: linear-gradient(0deg, #b0bbcd, #ffffff) 10 10;
    border-top: 0px solid;
    margin: 0 auto;
  }
  .hcltopclose {
    position: absolute;
    right: 7px;
    cursor: pointer;
    top: 50%;
    transform: translate(0, -50%);
    width: 31px;
    height: 31px;
  }
  .hcltitle {
    font-size: 18px;
    color: #40495a;
    line-height: 41px;
    padding-left: 10px;
    font-weight: 700;
    position: absolute;
    left: 20px;
  }
  .footitem img {
    width: 117px;
    height: 38px;
  }
  .dc1img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .tleftbox {
    position: absolute;
    left: 20px;
    bottom: 20px;
  }
  .tleftbox img,
  .trightbox img {
    width: 43px;
    height: 46px;
  }
  .trightbox {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
  .mxboxtitle {
    font-size: 20px;
    position: absolute;
    top: 15px;
    width: 100%;
    text-align: center;
  }

  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
    }
  }
  @-moz-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -moz-transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      -moz-transform: translateX(0);
    }
  }
  .tmd {
    position: absolute;
    left: 94px;
    top: 65px;
    width: 464px;
    height: 583px;
  }
  .tmy {
    width: 29px;
    height: 29px;
    position: absolute;
    left: 299px;
    top: 175px;
    cursor: pointer;
    z-index: 9999;
  }
  .tmy2 {
    position: absolute;
    left: 499px;
    top: 185px;
  }
  .y2img {
    position: absolute;
    left: 510px;
    top: 178px;
    width: 326px;
    height: 258px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .tmy3 {
    position: absolute;
    left: 375px;
    top: 265px;
  }
  .y3img {
    position: absolute;
    left: 389px;
    top: 210px;
    width: 450px;
    height: 210px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .tmy4 {
    position: absolute;
    left: 450px;
    top: 315px;
  }
  .y4img {
    position: absolute;
    left: 465px;
    top: 310px;
    width: 370px;
    height: 140px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .tmy5 {
    position: absolute;
    left: 370px;
    top: 345px;
  }
  .y5img {
    position: absolute;
    left: 385px;
    top: 295px;
    width: 425px;
    height: 290px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .tmy6 {
    position: absolute;
    left: 295px;
    top: 365px;
  }
  .y6img {
    position: absolute;
    left: 310px;
    top: 95px;
    width: 520px;
    height: 500px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .tmy7 {
    position: absolute;
    left: 220px;
    top: 425px;
  }

  .y7img {
    position: absolute;
    left: 240px;
    top: 375px;
    width: 555px;
    height: 168px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }

  .tmy8 {
    position: absolute;
    left: 292px;
    top: 440px;
  }

  .y8img {
    position: absolute;
    left: 310px;
    top: 220px;
    width: 514px;
    height: 300px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .tmy9 {
    position: absolute;
    left: 310px;
    top: 525px;
  }

  .y9img {
    position: absolute;
    left: 320px;
    top: 410px;
    width: 505px;
    height: 168px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
  .y1img {
    position: absolute;
    left: 315px;
    top: 53px;
    width: 519px;
    height: 135px;
    -webkit-animation: fadeInLeft 1s 0.2s ease both;
    -moz-animation: fadeInLeft 1s 0.2s ease both;
  }
</style>
